<template>
  <van-tabbar v-model="active">
    <van-tabbar-item
      v-for="item in router.options.routes[0].children"
      :key="item.path"
      :icon="item.meta.icon"
      :url="`#/${item.path}`"
      >{{ item.meta.name }}</van-tabbar-item
    >
  </van-tabbar>
  <RouterView />
</template>
<script setup>
import { onMounted, ref } from "vue";

import { useRouter, useRoute } from "vue-router";

const route = useRoute();
const router = useRouter();

const active = ref(0);

onMounted(() => {
  const data = router.options.routes[0];

  // console.log("item:", router.options.routes[0].children);
  active.value = data.children.findIndex(
    (item) => "/" + item.path === route.path
  );
  // console.log("active:", active.value);
});
</script>
<style scoped></style>
